.u-relative {
  position: relative;
}

.u-absolute {
  position: absolute;
}
.u-absolute-r {
  position: absolute;
  right: 0;
  font-size: 20px;
}

.u-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.u-flex-wrap {
  flex-wrap: wrap;
}

.u-flex-nowrap {
  flex-wrap: nowrap;
}

.u-col-center {
  align-items: center;
}

.u-col-top {
  align-items: flex-start;
}

.u-col-bottom {
  align-items: flex-end;
}

.u-col-stretch {
  align-items: stretch;
}

.u-row-center {
  justify-content: center;
}

.u-flex-evenly {
  justify-content: space-evenly;
}

.u-row-left {
  justify-content: flex-start;
}

.u-row-right {
  justify-content: flex-end;
}

.u-row-between {
  justify-content: space-between;
}

.u-row-around {
  justify-content: space-around;
}

.u-text-left {
  text-align: left;
}

.u-text-center {
  text-align: center;
}

.u-text-right {
  text-align: right;
}

.u-flex-col {
  display: flex;
  flex-direction: column;
}

.u-flex-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

// 定义flex等分
@for $i from 0 through 12 {
  .u-flex-#{$i} {
    flex: $i;
  }
}

// 定义字体(px)单位，小于20都为px单位字体
@for $i from 5 to 20 {
  .u-font-#{$i} {
    font-size: $i + px;
  }
}

// 定义内外边距，历遍1-80
@for $i from 0 through 100 {
  // 只要双数和能被5除尽的数
  @if $i % 2 == 0 or $i % 5 == 0 {
    // 得出：u-margin-30或者u-m-30
    .u-m-#{$i} {
      margin: $i + px !important;
    }

    // 得出：u-padding-30或者u-p-30
    .u-p-#{$i} {
      padding: $i + px !important;
    }

    @each $short, $long in l left, t top, r right, b bottom {
      // 缩写版，结果如： u-m-l-30
      // 定义外边距
      .u-m-#{$short}-#{$i} {
        margin-#{$long}: $i + px !important;
      }

      // 定义内边距
      .u-p-#{$short}-#{$i} {
        padding-#{$long}: $i + px !important;
      }
    }
  }
}

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.font-bold {
  font-weight: bold;
}

.font-weight-300 {
  font-weight: 300;
}

// overflow
.u-overflow-hidden {
  overflow: hidden;
}

.u-overflow-auto {
  overflow: auto;
}

.border-box {
  box-sizing: border-box;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

// Cursor
.u-cursor-pointer {
  cursor: pointer;
}

.u-b-t-reset {
  border-top: none 0 !important;
}

// // 重写Element UI部分样式
// .custom-select {
//   ::v-deep .el-input__inner {
//       border: none;
//   }
// }

.u-table {
  display: table;
}

.u-table-cell {
  display: table-cell;
}

.u-user-select-none {
  user-select: none;
}

// margin util
.u-m-l-a {
  margin-left: auto !important;
}

.u-m-l-r {
  margin-right: auto !important;
}

.d-flex {
  display: flex;
}
